<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= title %></title>
    <link rel="stylesheet" href="/stylesheets/socket.css">
    <script type="text/javascript" src="/javascript/lib/socket.io.dev.js"></script>
    <script type="text/javascript" src="/javascript/lib/vue-2.5.16.js"></script>
</head>
<body>
    <div id="socket">
        <h3>{{name}} <%= title %></h3>
        <div id="main">
            <div id="chat">
                <div id="send-obj">To: {{sendObj.name}}
                    <input type="text" style="float: right" v-model="myChat.name">
                </div>
                <div id="chat-content">
                    <!--<div class="msg-other">-->
                        <!--<div class="msg-title">-->
                            <!--<span class="user-name">小明</span>-->
                            <!--<span class="send-time">(2018-04-11 16:48:34)</span>-->
                        <!--</div>-->
                        <!--<div class="msg-content">Hi,大家好！</div>-->
                    <!--</div>-->

                    <div class="msg-other" :class="{'msg-my':item.flag}"  v-for="(item,index) in chatList" :key="index">
                        <div class="msg-title">
                            <span class="user-name" v-show="item.flag">我</span>
                            <span class="user-name" v-show="!item.flag">{{item.name}}</span>
                            <span class="send-time">({{item.time}})</span>
                    </div>
                        <div class="msg-content">{{item.content}}</div>
                    </div>

                </div>
                <div id="sub-box">
                    <input type="text" id="msg-input" v-model="myChat.content">
                    <button @click="send">发送</button>
                    <button onclick="b()">更新</button>
                </div>
            </div>
            <div id="friend">
                <div class="friend-box" v-for="(item,index) in friendList" @click="sendTo(index)">{{item.name}}</div>
            </div>
        </div>
        <div id="status-box">
            <span id="status"></span>
            <span>On Line Number:</span><span id="num">0</span>
        </div>
        <div id="text"></div>
    </div>
    <script type="text/javascript" src="/javascript/work/socket-fun.js"></script>
</body>
</html>